<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>B端商家中心</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <script src="navigation-helper.js"></script>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }
        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }
        .pulse-animation {
            animation: pulse 2s ease-in-out infinite;
        }
        .gradient-text {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    </style>
</head>
<body class="bg-gray-100">
    <div class="mx-auto max-w-[393px] h-[852px] bg-white relative overflow-hidden rounded-[40px] shadow-2xl">
        <!-- Status Bar -->
        <div class="bg-white px-6 pt-3 pb-2 relative z-50">
            <div class="flex justify-between items-center text-xs">
                <span class="font-semibold">9:41</span>
                <div class="flex space-x-1">
                    <i class="fas fa-signal"></i>
                    <i class="fas fa-wifi"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            </div>
        </div>

        <!-- Header -->
        <div class="bg-gradient-to-r from-indigo-600 to-purple-600 px-4 py-3">
            <div class="flex items-center justify-between text-white mb-3">
                <div class="flex-1">
                    <div class="flex items-center mb-1">
                        <p class="text-xs opacity-80 mr-2">早上好，商家</p>
                        <!-- 商家等级徽章 -->
                        <div class="merchant-badge bg-blue-500 px-2 py-0.5 rounded-full flex items-center" id="merchantBadge">
                            <i class="fas fa-building text-xs mr-1"></i>
                            <span class="text-xs font-medium">企业商家</span>
                        </div>
                    </div>
                    <h1 class="text-xl font-bold">商家服务中心</h1>
                    <!-- 等级信息 -->
                    <div class="flex items-center mt-1 text-xs opacity-90">
                        <span class="mr-3">佣金率: <strong>6%</strong></span>
                        <span class="mr-3">保证金: <strong>￥5,000</strong></span>
                        <button onclick="showMerchantLevelInfo()" class="text-yellow-300 hover:text-yellow-200">
                            <i class="fas fa-info-circle"></i>
                        </button>
                    </div>
                </div>
                <div class="flex items-center gap-3">
                    <button onclick="openNotifications()" class="relative hover:opacity-80 transition-opacity">
                        <i class="fas fa-bell text-xl"></i>
                        <span class="absolute -top-1 -right-1 w-2 h-2 bg-red-500 rounded-full"></span>
                    </button>
                    <button onclick="openCustomerService()" class="hover:opacity-80 transition-opacity">
                        <i class="fas fa-headset text-xl"></i>
                    </button>
                </div>
            </div>
            
            <!-- Quick Stats -->
            <div class="bg-white/10 backdrop-blur-sm rounded-xl p-3">
                <div class="grid grid-cols-4 gap-3 text-white text-center">
                    <div>
                        <p class="text-lg font-bold">12</p>
                        <p class="text-xs opacity-80">待发货</p>
                    </div>
                    <div>
                        <p class="text-lg font-bold">3</p>
                        <p class="text-xs opacity-80">待处理</p>
                    </div>
                    <div>
                        <p class="text-lg font-bold">98.5%</p>
                        <p class="text-xs opacity-80">好评率</p>
                    </div>
                    <div>
                        <p class="text-lg font-bold">4.9</p>
                        <p class="text-xs opacity-80">店铺评分</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Main Content Scrollable -->
        <div class="h-[calc(852px-220px)] overflow-y-auto pb-16">
            <!-- Today Overview -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center">
                    <span class="w-1 h-4 bg-indigo-600 mr-2 rounded-full"></span>
                    今日概览
                </h3>
                <div class="grid grid-cols-2 gap-3">
                    <div class="bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl p-4 border border-blue-100">
                        <div class="flex items-center justify-between mb-2">
                            <i class="fas fa-money-bill-wave text-2xl text-blue-600"></i>
                            <span class="text-xs text-green-600 bg-green-100 px-2 py-1 rounded-full">
                                <i class="fas fa-arrow-up mr-1"></i>12.5%
                            </span>
                        </div>
                        <p class="text-2xl font-bold text-gray-800">¥28,586</p>
                        <p class="text-xs text-gray-600">今日销售额</p>
                    </div>
                    
                    <div class="bg-gradient-to-br from-green-50 to-emerald-50 rounded-xl p-4 border border-green-100">
                        <div class="flex items-center justify-between mb-2">
                            <i class="fas fa-shopping-bag text-2xl text-green-600"></i>
                            <span class="text-xs text-green-600 bg-green-100 px-2 py-1 rounded-full">
                                <i class="fas fa-arrow-up mr-1"></i>8.3%
                            </span>
                        </div>
                        <p class="text-2xl font-bold text-gray-800">186</p>
                        <p class="text-xs text-gray-600">今日订单</p>
                    </div>
                    
                    <div class="bg-gradient-to-br from-purple-50 to-pink-50 rounded-xl p-4 border border-purple-100">
                        <div class="flex items-center justify-between mb-2">
                            <i class="fas fa-users text-2xl text-purple-600"></i>
                            <span class="text-xs text-green-600 bg-green-100 px-2 py-1 rounded-full">
                                <i class="fas fa-arrow-up mr-1"></i>15.6%
                            </span>
                        </div>
                        <p class="text-2xl font-bold text-gray-800">1,258</p>
                        <p class="text-xs text-gray-600">访客数</p>
                    </div>
                    
                    <div class="bg-gradient-to-br from-orange-50 to-red-50 rounded-xl p-4 border border-orange-100">
                        <div class="flex items-center justify-between mb-2">
                            <i class="fas fa-percentage text-2xl text-orange-600"></i>
                            <span class="text-xs text-green-600 bg-green-100 px-2 py-1 rounded-full">
                                <i class="fas fa-arrow-up mr-1"></i>2.1%
                            </span>
                        </div>
                        <p class="text-2xl font-bold text-gray-800">14.8%</p>
                        <p class="text-xs text-gray-600">转化率</p>
                    </div>
                </div>
            </div>

            <!-- Quick Actions -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center justify-between">
                    <span class="flex items-center">
                        <span class="w-1 h-4 bg-indigo-600 mr-2 rounded-full"></span>
                        快捷功能
                    </span>
                </h3>
                <div class="grid grid-cols-4 gap-3">
                    <a href="b2b-products.html" class="text-center block">
                        <div class="w-14 h-14 mx-auto bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center text-white mb-1 shadow-lg relative">
                            <i class="fas fa-box text-xl"></i>
                            <span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs w-5 h-5 rounded-full flex items-center justify-center">3</span>
                        </div>
                        <p class="text-xs text-gray-700">商品管理</p>
                    </a>
                    <a href="b2b-orders.html" class="text-center block">
                        <div class="w-14 h-14 mx-auto bg-gradient-to-br from-green-500 to-green-600 rounded-xl flex items-center justify-center text-white mb-1 shadow-lg relative">
                            <i class="fas fa-clipboard-list text-xl"></i>
                            <span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs w-5 h-5 rounded-full flex items-center justify-center">12</span>
                        </div>
                        <p class="text-xs text-gray-700">订单处理</p>
                    </a>
                    <a href="b2b-marketing.html" class="text-center block">
                        <div class="w-14 h-14 mx-auto bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl flex items-center justify-center text-white mb-1 shadow-lg">
                            <i class="fas fa-bullhorn text-xl"></i>
                        </div>
                        <p class="text-xs text-gray-700">营销推广</p>
                    </a>
                    <a href="b2b-finance.html" class="text-center block">
                        <div class="w-14 h-14 mx-auto bg-gradient-to-br from-pink-500 to-pink-600 rounded-xl flex items-center justify-center text-white mb-1 shadow-lg">
                            <i class="fas fa-wallet text-xl"></i>
                        </div>
                        <p class="text-xs text-gray-700">财务中心</p>
                    </a>
                    
                </div>
            </div>

            <!-- Pending Tasks -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center justify-between">
                    <span class="flex items-center">
                        <span class="w-1 h-4 bg-orange-600 mr-2 rounded-full"></span>
                        待办事项
                    </span>
                    <button onclick="viewAllTodos()" class="text-xs text-indigo-600 hover:text-indigo-800 transition-colors">查看全部 <i class="fas fa-chevron-right text-xs"></i></button>
                </h3>
                <div class="space-y-3">
                    <div class="bg-orange-50 border border-orange-200 rounded-lg p-3 flex items-center">
                        <div class="w-10 h-10 bg-orange-500 rounded-lg flex items-center justify-center text-white mr-3">
                            <i class="fas fa-truck"></i>
                        </div>
                        <div class="flex-1">
                            <p class="text-sm font-medium">待发货订单</p>
                            <p class="text-xs text-gray-600">您有12笔订单待发货</p>
                        </div>
                        <button onclick="handlePendingOrders()" class="bg-orange-500 text-white text-xs px-3 py-1.5 rounded-lg hover:bg-orange-600 transition-colors">
                            立即处理
                        </button>
                    </div>
                    
                    <div class="bg-blue-50 border border-blue-200 rounded-lg p-3 flex items-center">
                        <div class="w-10 h-10 bg-blue-500 rounded-lg flex items-center justify-center text-white mr-3">
                            <i class="fas fa-reply"></i>
                        </div>
                        <div class="flex-1">
                            <p class="text-sm font-medium">售后申请</p>
                            <p class="text-xs text-gray-600">3个售后申请待处理</p>
                        </div>
                        <button onclick="handleAfterSales()" class="bg-blue-500 text-white text-xs px-3 py-1.5 rounded-lg hover:bg-blue-600 transition-colors">
                            立即处理
                        </button>
                    </div>
                    
                    <div class="bg-purple-50 border border-purple-200 rounded-lg p-3 flex items-center">
                        <div class="w-10 h-10 bg-purple-500 rounded-lg flex items-center justify-center text-white mr-3">
                            <i class="fas fa-exclamation-circle"></i>
                        </div>
                        <div class="flex-1">
                            <p class="text-sm font-medium">库存预警</p>
                            <p class="text-xs text-gray-600">5个商品库存不足</p>
                        </div>
                        <button onclick="handleInventoryWarning()" class="bg-purple-500 text-white text-xs px-3 py-1.5 rounded-lg hover:bg-purple-600 transition-colors">
                            立即补货
                        </button>
                    </div>
                </div>
            </div>

            <!-- Platform Announcements -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center justify-between">
                    <span class="flex items-center">
                        <span class="w-1 h-4 bg-indigo-600 mr-2 rounded-full"></span>
                        平台公告
                    </span>
                    <button onclick="viewMoreAnnouncements()" class="text-xs text-indigo-600 hover:text-indigo-800 transition-colors">更多 <i class="fas fa-chevron-right text-xs"></i></button>
                </h3>
                <div onclick="viewAnnouncementDetail('202501050001')" class="bg-gradient-to-r from-indigo-50 to-purple-50 rounded-xl p-4 border border-indigo-100 cursor-pointer hover:shadow-md transition-shadow">
                    <div class="flex items-start">
                        <span class="bg-red-500 text-white text-xs px-2 py-1 rounded-full mr-3">新</span>
                        <div class="flex-1">
                            <h4 class="text-sm font-semibold mb-1">双11大促报名开启</h4>
                            <p class="text-xs text-gray-600 mb-2">2025年双11购物节商家报名通道已开放，享受流量扶持...</p>
                            <p class="text-xs text-gray-400">2025-01-05 10:30</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Bottom Navigation -->
        <div class="absolute bottom-0 left-0 right-0 bg-white border-t border-gray-200">
            <div class="flex justify-around py-2" id="bottom-nav">
                <a href="home-b2c.html" class="flex-1 text-center py-2">
                    <i class="fas fa-home text-xl  text-indigo-600 mb-1"></i>
                    <p class="text-xs text-indigo-600">首页</p>
                </a>
                <a href="b2b-dashboard.html" class="flex-1 text-center py-2">
                    <i class="fas fa-chart-bar text-xl  text-gray-400 mb-1"></i>
                    <p class="text-xs text-gray-400">数据</p>
                </a>
                <a href="b2b-profile.html" class="flex-1 text-center py-2">
                    <i class="fas fa-user text-xl text-gray-400 mb-1"></i>
                    <p class="text-xs text-gray-400">我的</p>
                </a>
            </div>
        </div>
    </div>

    <script>

        // Update header based on merchant status
        function updateHeader() {
            const status = getMerchantStatus();
            if (status.loggedIn && status.companyName) {
                document.querySelector('h1').textContent = status.companyName;
            }
        }

        // Merchant level management functions
        let currentMerchantLevel = {
            type: 'enterprise',
            name: '企业商家',
            icon: 'fas fa-building',
            color: 'blue',
            commission: '6%',
            deposit: '￥5,000',
            limit: '无限制'
        };
        
        // Show merchant level info
        function showMerchantLevelInfo() {
            alert('商家等级信息\\n\\n当前等级：企业商家\\n佣金率：6%\\n保证金：￥5,000\\n交易限制：无限制\\n\\n特权服务：\\n• 完整功能访问权限\\n• 7×24小时客服支持\\n• 专业运营指导\\n• 数据分析工具\\n\\n升级条件：\\n• 满足品牌授权要求\\n• 提供商标注册证\\n• 缴纳￥20,000保证金');
        }
        
        // Upgrade merchant level
        function upgradeMerchantLevel() {
            if (confirm('申请升级至品牌旗舰店？\\n\\n升级后将享受：\\n• 佣金率降至4%\\n• 优先展示权\\n• 专属客服经理\\n• 营销资源支持\\n\\n需要额外缴纳￥15,000保证金（总计￥20,000）')) {
                alert('升级申请已提交！\\n\\n请准备以下材料：\\n• 品牌授权书\\n• 商标注册证\\n• 质量认证文件\\n\\n客服人员将在24小时内与您联系处理。');
            }
        }
        
        // Open notifications page
        function openNotifications() {
            window.location.href = 'notifications.html';
        }

        // Open customer service page
        function openCustomerService() {
            window.location.href = 'customer-service.html';
        }

        // Handle pending orders - navigate to orders page with pending filter
        function handlePendingOrders() {
            window.location.href = 'b2b-orders.html';
        }

        // Handle after-sales requests - navigate to orders page with service filter
        function handleAfterSales() {
            window.location.href = 'b2b-orders.html#service';
        }

        // Handle inventory warnings - navigate to inventory management
        function handleInventoryWarning() {
            window.location.href = 'inventory-management.html';
        }

        // View all todos - navigate to comprehensive todo list
        function viewAllTodos() {
            window.location.href = 'b2b-orders.html';
        }

        // View more announcements - navigate to announcements page
        function viewMoreAnnouncements() {
            window.location.href = 'platform-announcements.html';
        }

        // View all courses - navigate to business school
        function viewAllCourses() {
            window.location.href = 'business-school.html';
        }

        // View announcement detail - navigate to specific announcement
        function viewAnnouncementDetail(announcementId) {
            window.location.href = 'announcement-detail.html?id=' + announcementId;
        }

        // View course detail - navigate to specific course
        function viewCourseDetail(courseId) {
            window.location.href = 'course-detail.html?id=' + courseId;
        }

        // Initialize page
        document.addEventListener('DOMContentLoaded', function() {
            updateBottomNavigation();
            updateHeader();
            setupIframeMessaging(); // Enable iframe communication for status sync
        });
    </script>
</body>
</html>